<template>
    <div class="login">
        <div class="tops"><img :src="logintopimg"/><p>账号登录</p></div>
        <div class="userimg"><img :src="userimg"/></div>
        <div class="userinfo">
            <form>
                <div class="username">
                    <label><Icon type="md-person" /></label>&nbsp; | &nbsp;<input v-model="account" name="username" placeholder="请输入登录账号" />
                </div>
                <div class="password">
                    <label><Icon type="md-lock" /></label>&nbsp; | &nbsp;<input  v-model="password" name="password" type="password" placeholder="请输入登录密码" />
                </div>
                <div class="loginBtn" @click="getLoginInfo()">登录</div>
            </form>
        </div>
    </div>
</template>

<script>
import axios from 'axios'
import { Toast } from 'vant';
  export default {
      name: 'LoginIndex',
      data () {
          return {
              logintopimg: 'static/img/loginbg.jpg',
              userimg: 'static/img/head.png',
              account: '',
              password: ''
          }
      },
    methods: {
        getLoginInfo () {
            var userdata = {
                username:  this.account,
                password:  this.password
            }
            axios.post('/api/user/login',userdata).then(this.getLoginSucc)
	    },
        getLoginSucc (res) {
            var successtatus = res.data.status;
            var successToken = res.data.data.access_token;
            // var memberdata =JSON.stringify(res.data.data);
            var userid=res.data.data.id;
            console.log(res)
                if(successtatus == 0){
                    console.log('请重新成功');
                      localStorage.setItem('token',successToken); //保存token
                    //  localStorage.setItem('data',memberdata);
 localStorage.setItem('userid',userid);


                    Toast({
                        message: '登录成功！',
                        mask: true,
                        duration: 1000
                    });
                     var _this = this;

                     var intro =res.data.data.intro;
        var icon =res.data.data.icon;
   if(intro==""|| icon ==null){
          console.log(22222)
   setTimeout(function(){
      _this.$router.push({
      path:'/vipinfo',
      query:{
        id:userid
      }
    })
   },1500)
        }else{
            setTimeout(function () {
                    _this.$router.push({path: '/'});
                  }, 2000);
        }

                }else{
                    //this.$toast('登录失败,请仔细核对信息！');
                    Toast({
                        message: '登录失败,请仔细核对信息！',
                        mask: true,
                        duration: 2000,
                    });
                }

        },

        }
  }
</script>

<style lang='stylus' scoped>

.tops
    height :10rem

.tops >>> img
    max-width:100%
    height :100%
    width :100%
    border-radius: 0 0px 80px 80px
  p
    color: #ffffff
    font-size: 1rem
    left: calc(50% - 32px)
    position: absolute
    top: 1rem
.userimg
    position: relative
    text-align: center
    top: -55px
.userimg >>> img
    height: 6rem
    width: 6rem
    max-width: 100%
    border-radius: 50%
.userinfo
    text-align: center
.userinfo >>> div
    margin: 2rem 0
.userinfo >>> div
  input
    font-size: 0.8rem
    border-style: none
    padding: 0.3rem
  label
    font-size: 1.2rem
    margin-right: .2rem
.loginBtn
    border-radius: 2rem
    background: #67BBA3
    margin: 4rem auto !important
    width: 8rem
    padding: .3rem
    color: #fff
</style>


